<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();
function toDashboard() {
  router.push("/");
}
</script>

<template>
  <div class="container">
    <div class="img-container">
      <img alt="Vue logo" src="@/assets/404.svg" draggable="false" />
    </div>

    <div class="text-container">
      <p>Page Not Found</p>
      <p style="font-size: 18px;">
        常见问题为当前此角色无当前路由，如果确定要使用本路由，请到角色管理进行分配
      </p>
      <a-button type="outline" @click="toDashboard">返回首页</a-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100%;
    background-color: #7A97F8;
    color: white;
    user-select: none;
}

$img-container-height: 40%;

.img-container {
  width: 100%;
  height: $img-container-height;
  display: flex;
  justify-content: center;
  align-items: end;
}

.text-container {
  width: 100%;
  height: calc(100% - $img-container-height);

  text-align: center;

  p {
    font-size: 60px;
    margin: 30px 0;
  }

  button {
    color: white;
    border: white 1px solid;
    margin-top: 30px;

    &:hover {
        color: gray;
        border-color: gray;
        cursor: pointer;
    }
  }
}
</style>
